<template>
  <div>
    <el-select v-model="month" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'MonthCondition',
  props: {
    currentMonth: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      month: '',
      options: []
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const date = new Date()
      const options = []
      for (let i = 1; i <= 12; i += 1) {
        options.push({
          label: i + '月',
          value: date.getFullYear() + '-' + i.toString().padStart(2, '0')
        })
      }
      this.options = options
      if (this.currentMonth) {
        this.month = options[date.getMonth()].value
      }
      this.month && this.handleChange()
    },
    handleChange() {
      this.$emit('change', this.month)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
